﻿@page "/components/dialog"

<PageOutlet Url="components/dialog"
            Title="Dialog"
            Description="dialog component of the bit BlazorUI components" />

<DemoPage Name="Dialog"
          Description="Dialogs are temporary pop-ups that take focus from the page or app and require people to interact with them."
          Parameters="componentParameters"
          SubClasses="componentSubClasses"
          SubEnums="componentSubEnums"
          GitHubUrl="Surfaces/Dialog/BitDialog.razor"
          GitHubDemoUrl="Surfaces/Dialog/BitDialogDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
        <BitButton OnClick="@(() => IsOpen = true)">Open Dialog</BitButton>
        <BitDialog @bind-IsOpen="IsOpen" Title="Missing Subject" Message="Do you want to send this message without a subject?" />
    </DemoExample>

    <DemoExample Title="Result" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
        <BitButton OnClick="@(() => IsOpen1 = true)">Open Dialog</BitButton>
        <br /><br />
        <span>Result is: @dialogRef?.Result</span>
        <BitDialog @ref="@dialogRef"
                   @bind-IsOpen="@IsOpen1"
                   Title="Missing Subject"
                   Message="Do you want to send this message without a subject?" />
    </DemoExample>

    <DemoExample Title="Events" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
        <BitButton OnClick="@(() => IsOpenEvent = true)">Open Dialog</BitButton>
        <BitDialog @bind-IsOpen="IsOpenEvent"
                   Title="Missing Subject"
                   Message="Do you want to send this message without a subject?"
                   OnOk="async () => await Task.Delay(1000)" />
    </DemoExample>

    <DemoExample Title="Custom content" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
        <BitButton OnClick="@(() => IsOpen2 = true)">Open Dialog</BitButton>
        <br /><br />
        <div>Result is: @customDialogRef?.Result</div>
        @if (customDialogRef?.Result == BitDialogResult.Ok)
        {
            <div>Value is: @optionValue</div>
        }

        <BitDialog @ref="customDialogRef" @bind-IsOpen="@IsOpen2" ShowCloseButton="false">
            <div class="dialog-title">
                <span>All emails together</span>
            </div>
            <div class="dialog-body">
                <p>
                    Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.
                </p>
                <br />
                <BitChoiceGroup @bind-Value="optionValue" Label="Basic Options" TItem="BitChoiceGroupOption<string>" TValue="string">
                    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
                    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
                    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
                </BitChoiceGroup>
            </div>
        </BitDialog>

        <br /><br />
        <BitButton OnClick="@(() => IsOpen3 = true)">Open Dialog</BitButton>
        <BitDialog @bind-IsOpen="@IsOpen3" ShowCloseButton="false">
            <Body>
                <div class="dialog-title">
                    Delete all
                </div>
                <div class="dialog-body">
                    +99 Emails will be deleted.
                </div>
            </Body>
            <FooterTemplate>
                <div class="dialog-footer">
                    Are you sure?! there's no going back.
                </div>
            </FooterTemplate>
        </BitDialog>
    </DemoExample>

    <DemoExample Title="Advanced options" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
        <div class="example-desc">BitDialog has some advanced options to be customized .</div>
        <div class="btn-container">
            <BitButton OnClick="@(() => IsOpen4 = true)">Open Dialog (IsBlocking = true)</BitButton>
            <BitButton OnClick="@(() => IsOpen5 = true)">Open Dialog (AutoToggleScroll = false)</BitButton>
        </div>
        <div>
            <BitDialog IsBlocking
                       @bind-IsOpen="IsOpen4"
                       Title="Missing Subject"
                       Message="Do you want to send this message without a subject?" />

            <BitDialog AutoToggleScroll="false"
                       @bind-IsOpen="IsOpen5"
                       Title="Missing Subject"
                       Message="Do you want to send this message without a subject?" />
        </div>
    </DemoExample>

    <DemoExample Title="Absolute positioning" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
        <div class="example-desc">BitDialog has an absolute position option to further customize it's location.</div>

        <div class="btn-container">
            <BitButton OnClick="@(() => IsOpen6 = true)">Open Dialog (AbsolutePosition = true)</BitButton>
            <BitButton OnClick="@(() => IsOpen7 = true)">Open Dialog (ScrollerSelector)</BitButton>
        </div>

        <div class="relative-container">
            <BitDialog AbsolutePosition IsModeless
                       @bind-IsOpen="IsOpen6"
                       AutoToggleScroll="false"
                       Title="Missing Subject"
                       Message="Do you want to send this message without a subject?" />

            <BitDialog AbsolutePosition
                       @bind-IsOpen="IsOpen7"
                       ScrollerSelector=".relative-container"
                       Title="Missing Subject"
                       Message="Do you want to send this message without a subject?" />

            Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
            Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
            when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
            for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
            <br />
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
            in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
            <br />
            In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
            shaped into meaning, and the emotions ready to resonate with every reader.
            <br />
            In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
            each word has the power to transform into something extraordinary. Here lies the start of something new—an
            opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
            idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
            begins here, in this quiet moment where everything is possible.
            <br />
            Imagine this space as a window into the future empty yet alive with the energy of endless possibilities.
            These words stand as temporary guides, placeholders that whisper of what is to come.
            They hold the promise of stories waiting to unfold, ideas eager to take shape, and connections that will
            soon emerge to inspire and resonate. This is not an empty page; it is a canvas, rich with potential and
            ready to transform into something meaningful.
            For now, these lines are here to remind you of the beauty of beginnings.
            They are the quiet before the symphony, the foundation upon which your creativity will build.
            Soon, this space will hold your thoughts, your visions, and your voice a reflection of who you
            are and what you wish to share with the world. Every sentence will carry purpose, every word
            will invite others to connect, to think, to feel.
            So take a moment to dream, to imagine what this blank slate can become.
            Whether it’s a story, an idea, or a message that matters, this is your starting point.
            The possibilities are endless, and the journey begins now.
        </div>
    </DemoExample>

    <DemoExample Title="Position" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
        <div class="example-desc">To set the Dialog position on the page you can use the Position parameter.</div>
        <div>
            <div class="position-btn">
                <div>
                    <BitButton OnClick="() => OpenDialogInPosition(BitDialogPosition.TopLeft)">Top Left</BitButton>
                    <BitButton OnClick="() => OpenDialogInPosition(BitDialogPosition.TopRight)">Top Right</BitButton>
                </div>
                <div>
                    <BitButton OnClick="() => OpenDialogInPosition(BitDialogPosition.BottomLeft)">Bottom Left</BitButton>
                    <BitButton OnClick="() => OpenDialogInPosition(BitDialogPosition.BottomRight)">Bottom Right</BitButton>
                </div>
            </div>
            <BitDialog @bind-IsOpen="IsOpenInPosition"
                       Position="position"
                       Title="Missing Subject"
                       Message="Do you want to send this message without a subject?" />
        </div>
    </DemoExample>

    <DemoExample Title="Draggable" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
        <BitToggle Label="Is Draggable" @bind-Value="IsDraggable" />
        <br />
        <BitButton OnClick="@(() => IsOpen8 = true)">Open Dialog</BitButton>
        <BitDialog @bind-IsOpen="IsOpen8"
                   IsDraggable="IsDraggable"
                   Title="Draggable dialog"
                   Message="Do you want to send this message without a subject?" />

        <BitSeparator Style="margin: 1rem 0" />

        <div class="example-desc">Using custom drag element.</div>
        <BitButton OnClick="@(() => IsOpen9 = true)">Open Dialog</BitButton>
        <BitDialog IsDraggable @bind-IsOpen="IsOpen9" ShowCloseButton="false" DragElementSelector=".dialog-title-drag">
            <div class="dialog-title dialog-title-drag">
                <span>Draggable Dialog with custom drag element</span>
                <BitButton Variant="BitVariant.Text" OnClick="@(() => IsOpen9 = false)" IconName="@BitIconName.ChromeClose" Title="Close" />
            </div>
            <div class="dialog-body">
                <p>
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </p>
            </div>
        </BitDialog>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
        <div dir="rtl">
            <BitButton Dir="BitDir.Rtl" OnClick="@(() => IsOpen10 = true)">باز کردن پنجره پیام</BitButton>
            <BitDialog @bind-IsOpen="IsOpen10"
                       Dir="BitDir.Rtl"
                       Title="بدون موضوع"
                       OkText="تایید"
                       CancelText="انصراف"
                       Message="آیا می خواهید این پیام را بدون موضوع ارسال کنید؟" />
        </div>
    </DemoExample>
</DemoPage>